<template>
    <n-form 
        ref="preFormRef" 
        :model="formParams"
        label-placement="left" 
        :rules="rules"
        :label-width="88"
        require-mark-placement="left"
        size="large"
        class="pre-form-box"
    >
        <n-form-item label="预约事项" path="item">
            <n-select
                v-model:value="formParams.item"
                :options="matterItem"
                label-field="name"
                value-field="uuid"
                clearable
                @update:value="changeSele"
            />
        </n-form-item>

        <n-flex :size="24" class="mb-72px mt-34px px-8">
            <div class="w-160px h-105px flex-center flex-col rounded-md relative choose-kf" v-for="item in kfList" :key="item.uuid" @click="chooseKf(item)" :class="{'select': formParams.customer_service == item.uuid, 'active': item.status}">
                <img class="w-24px h-24px" :src="iconKefu" alt="">
                <img class="w-51px h-51px absolute left-0 top-0" :src="iconkfing" alt="" v-if="item.status">
                <img class="w-51px h-51px absolute left-0 top-0" :src="iconkfno" alt="" v-else>
                <div class="select-ing flex-center" v-if="formParams.customer_service == item.uuid">
                    <n-icon :size="18" color="#fff" :component="CheckmarkSharp" />
                </div>
                <div class="flex flex-col items-cente mt-2">
                    <span class="text-[#849CFF] text-sm tex text-center">{{ item.region_name }}</span>
                    <span class="text-[#849CFF] text-sm tex">{{ item.seat }}{{ item.employee_no }}</span>
                </div>
            </div>
        </n-flex>

        <n-form-item label="预约日期" path="date">
            <n-date-picker class="w-full" clearable v-model:formatted-value="formParams.date" value-format="yyyy-MM-dd" type="date" :is-date-disabled="dateDisabled">
                <template #date-icon>
                    <img class="w-28px h-19px" :src="iconDate" alt="">
                </template>
            </n-date-picker>
        </n-form-item>

        <n-flex :size="24" class="mt-34px pl-80px ml-6" v-if="formParams.date">
            <div class="w-160px h-90px flex-center flex-col rounded-md relative choose-date" :class="{'select': formParams.category == '1'}" @click="formParams.category = '1'">
                <div class="select-ing flex-center" v-if="formParams.category == '1'">
                    <n-icon :size="18" color="#fff" :component="CheckmarkSharp" />
                </div>
                <span class="text-[#fff] text-sm">上午</span>
                <span class="text-[#fff] text-sm mt-2">08:30-12:00</span>
            </div>
            <div class="w-160px h-90px flex-center flex-col rounded-md relative choose-date" :class="{'select': formParams.category == '2'}" @click="formParams.category = '2'">
                <div class="select-ing flex-center" v-if="formParams.category == '2'">
                    <n-icon :size="18" color="#fff" :component="CheckmarkSharp" />
                </div>
                <span class="text-[#fff] text-sm">下午</span>
                <span class="text-[#fff] text-sm mt-2">14:30-17:00</span>
            </div>
        </n-flex>
    </n-form>
</template>

<script lang="ts" setup>
    import { getStaffItemApi } from "@/api/home"
    import iconKefu from "@/assets/image/icon/icon-kegu.png"
    import iconkfing from "@/assets/image/icon/icon-kfing.png"
    import iconkfno from "@/assets/image/icon/icon-kfno.png"
    import iconDate from "@/assets/image/icon/icon-date.png"
    import { type FormValidationError } from "naive-ui"
    import { CheckmarkSharp } from "@vicons/ionicons5"
    import { type MatterItemRes } from "@/api/home"

    const props = defineProps<{
        matterItem: MatterItemRes[] | []
    }>()

    const formParams = ref({
        item: null,
        customer_service: '',
        date: null,
        category: ''
    })

    const preFormRef = ref()

    const rules = {
        item: {
            required: true,
            trigger: ['blur', 'input'],
            message: '请选择预约事项'
        },
        date: {
            required: true,
            trigger: ['blur', 'input'],
            message: '请选择预约日期'
        }
    }

    onMounted(() => {
        preFormRef.value?.restoreValidation()
        // renderAppointmentList()
    })

    const kfList = ref<any>([])
    async function renderKefuItems(url:string) {
        const res = await getStaffItemApi({url})
        kfList.value = res
    }
    // async function renderAppointmentList() {
    //     const res = await getAppointmentListApi()
    // }

    const changeSele = (val) => {
        const url = props.matterItem.find((ele:MatterItemRes) => ele.uuid == val)?.file_or_url as string
        renderKefuItems(url)
    }

    const chooseKf = (item:{uuid:string;status:boolean}) => {
        formParams.value.customer_service = item.uuid
    }

    const dateDisabled = (ts:any) => {
        const date = new Date()
        return ts < date
    }

    // 表单校验
    function preformValidate():Promise<boolean> {
        return new Promise((resolve, reject) => {
            preFormRef.value?.validate((err:Array<FormValidationError> | undefined) => {
                if(err) {
                    window['$message'].error('请填写预约表单必填项')
                    resolve(false)
                }else {
                    if(!formParams.value.customer_service) {
                        window['$message'].error('请选择客服')
                        resolve(false)
                        return
                    }
                    if(!formParams.value.category) {
                        window['$message'].error('请选择预约时间段')
                        resolve(false)
                        return
                    }
                    resolve(true)
                }
            })
        })
    }

    defineExpose({
        formParams,
        preformValidate
    })
</script>

<style lang="scss" scoped>
    .pre-form-box {
        .choose-kf,
        .choose-date {
            background-color: #3C58CC;
            border: 1px solid transparent;
            cursor: pointer;

            &.active {
                background-color: #2041CF;

                .tex {
                    color: #B5CBF8;
                }
            }

            &.select {
                border: 2px solid #07C160;
            }

            &:hover {
                border: 2px solid #07C160;
            }

            .select-ing {
                position: absolute;
                right: -13px;
                top: -13px;
                width: 26px;
                height: 26px;
                background-color: #07C160;
                border-radius: 50%;
            }
        }

        .choose-date {
            background-color: #357ace;

            &:hover {
                border: 2px solid #07C160;
                background-color: #357ace;
            }

            &.select {
                border: 2px solid #07C160;
            }
        }

        ::v-deep(.n-base-selection-input__content) {
            color: #fff;
        }

        ::v-deep(.n-form-item-label) {
            height: 44px;
        }
        ::v-deep(.n-form-item-label__text) {
            color: #fff;
        }

        ::v-deep(.n-base-selection-label) {
            background-color: #024ca6 !important;
            height: 44px;
        }

        ::v-deep(.n-base-selection__border) {
            border-color: #9AAAFF;;
        }

        ::v-deep(.n-input) {
            height: 44px;
            background-color: #024ca6 !important;

            input {
                height: 44px;
                color: #fff;
            }
        }

        ::v-deep(.n-input__border) {
            border-color: #9AAAFF !important;
        }
    }
</style>